<template>
	<div class="main-box">
		<!-- 中间隔层 start -->
		<div class="user-info-box">
			<div class="user-info">
				<div class="left">
					<el-avatar :size="100"
							   src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png">
					</el-avatar>
				</div>
				<div class="right">
					<div style="font-size: 27px">
						{{ studentInfoData.loginInfo.name }}	，{{new Date().getHours()<12?"上午好":"下午好"}}
					</div>
					<div>
						天赋如同自然花木，要用学习来修剪。
					</div>
				</div>
			</div>
		</div>
		<!-- 中间隔层 end -->
		<!-- 下面的主要内容 start -->
		<div class="main-content">
			<el-tabs v-model="activeName">
				<el-tab-pane name="1">
					<template #label>
						<div class="label">课程</div>
					</template>
					<div class="content">
						<lzk-student-course-list></lzk-student-course-list>
					</div>
				</el-tab-pane>
				<el-tab-pane name="3">
					<template #label>
						<div class="label">
							通知
							<el-badge :value="noticeList.length">
							</el-badge>
						</div>
					</template>
					<!-- 通知栏的内容 start -->
					<lzk-h info="这里仅展示最近7天发布的内容" show="tip"></lzk-h>
					<div class="content">
						<div class="content-in-information" >
							<el-card class="box-card" v-for="item in noticeList">
								<template #header>
									<div style="color: #8CC5FF;">
										《{{getCourseName(item.courseId)}}》
									</div>
									<div class="card-header">
										<p>{{item.title}}</p>
										<p>{{getDateString(item.createTime)}}</p>
									</div>
								</template>
								<div class="card-content">

									{{item.content}}
								</div>
							</el-card>
						</div>
					</div>
					<!-- 通知栏的内容 start -->
				</el-tab-pane>
			</el-tabs>
		</div>
		<!-- 下面的主要内容 end -->
	</div>
</template>

<script>
import StudentCourseList from "@/views/student/courseList/StudentCourseList";
import axios from "@/plugins/axios";
import ipconfig from "@/utils/ipconfig";
import DateUtils from "@/utils/DateUtils";
import {ElMessage} from "element-plus";
import MessageHeaderBar from "@/components/tip/TipHeader";

export default {
	name: "CourseList",
	data(){
		return {
			/**
			 * 学员登录数据
			 */
			studentInfoData:this.$store.state.studentInfoData,
			/**
			 * 当前选中页
			 */
			activeName:'1',
			/**
			 * 显示的通知列表
			 */
			noticeList:[],
		}
	},
	methods:{
		/*
		* 获取显示时间
		* @param date 时间戳
		* @returns {string}
		* */
		getDateString(date){
			return DateUtils.getDateSting(date);
		},
		/**
		 * 获取课程名称
		 * @param courseId
		 * @returns {string}
		 */
		getCourseName(courseId){
			let name="";
			this.studentInfoData.courseList.forEach(item=>{
				if(item.id==courseId){
					name=item.name;
				}
			});
			return name;
		},
	},
	created() {
		// 获取通知数据
		window.setInterval( ()=>{
			axios.get(ipconfig.address+"/notice/studentNearNotice/"+this.studentInfoData.loginInfo.id+"/7").then((response)=>{
				if(response.data.code==200){
					this.noticeList=response.data.data;
					console.log("定时器通知："+response.data.data);
				}else{
					ElMessage.warning(response.data.message);
				}
			}).catch((error)=>{
				console.log(error);
			});
		},10000);

	},
	components:{
		"lzk-student-course-list":StudentCourseList,
		"lzk-h":MessageHeaderBar,
	},

}
</script>

<style lang="scss" scoped>
.main-box{
	margin-top: 20px;
	width: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;

	.user-info-box{
		width: 100%;
		height: 200px;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		background: #8CC5FF;

		.user-info{
			width: 80%;
			display: flex;
			flex-direction: row;
			.left{
				margin-right: 10px;
			}
			.right{
				color: #ffffff;
				div{
					margin-top: 15px;
				}
			}
		}
	}

	.main-content{
		width: 80%;
		height: 100%;

		.label{
			font-size: 20px;
		}
		.content{
			width: 100%;
			height: 100%;
			background: #f6f6f6;

			.content-in-information{
				width: 100%;
				margin-left: 40px;
				display: flex;
				flex-direction: row;
				flex-wrap: wrap;
			}
		}
	}
}
.card-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.card-content{
	height: 120px;
}
.text {
	font-size: 14px;
}

.item {
	margin-bottom: 18px;
}

.box-card {
	width: 480px;
	margin: 20px;
}
</style>